import React, {useState} from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
  Link
  } from "react-router-dom";
import 'antd/dist/antd.css';
import { Layout, Menu, Breadcrumb } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  UserOutlined,
} from '@ant-design/icons';
import TodoContainer from './TodoContainer';
import TodoFetchContainer from './TodoFetchContainer';
import Home from './Home';
import './App.css';
import TodoAntdContainer from './TodoAntdContainer';

const { Header, Content, Footer, Sider } = Layout;

function App() {

    const [collapsed, setCollapse] = useState(false);
    const [navKey, setNavKey] = useState('home')
    function handleToggle() {
        setCollapse(!collapsed)
    }
    const handleNavigate = (ev) => {
        setNavKey(ev.key)
    }

    return (
    <div className="App">
        <Router>
        <Layout style={{ minHeight: '100vh' }}>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="logo" />
                <Menu theme="dark" mode="inline" selectedKeys={[navKey]}  onClick={handleNavigate}>
                    <Menu.Item key="home" icon={<UserOutlined />}>
                        <Link to="/home" />Home
                    </Menu.Item>
                    <Menu.Item key="todo" icon={<UserOutlined />}>
                        <Link to="/todo" />Todo List 
                    </Menu.Item>
                    <Menu.Item key="user" icon={<UserOutlined />}>
                        <Link to="/user" />User1
                    </Menu.Item>
                    <Menu.Item key="antdtodo" icon={<UserOutlined />}>
                        <Link to="/antdtodo" />Antdtodo
                    </Menu.Item>
                </Menu>
            </Sider>
            <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: 0 }} >
            </Header>
            <Content className="site-layout-background"
            style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
            }}>
                    <Switch>
                        <div className="App-header">
                        <Route path="/home">
                             <Home />
                        </Route>
                        <Route path="/todo">
                            <TodoContainer />
                        </Route>
                        <Route path="/user">
                            <TodoFetchContainer />
                        </Route>
                        <Route path="/antdtodo">
                            <TodoAntdContainer />
                        </Route>
                        </div>
                    </Switch>
            </Content>
        </Layout>
        </Layout>
        </Router>
    </div>
    )
}

export default App;